<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>EDU博客创作</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/css/nprogress.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/css/font-awesome.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/css/fileinput.min.css}">
    <link rel="apple-touch-icon-precomposed" th:href="@{/blog/images/icon.png}">
    <link rel="shortcut icon" th:href="@{/blog/images/favicon.ico}">
    <script th:src="@{/blog/js/jquery-2.1.4.min.js}"></script>
    <script th:src="@{/blog/js/nprogress.js}"></script>
    <script th:src="@{/blog/js/jquery.lazyload.min.js}"></script>
    <script th:src="@{/blog/js/fileinput.min.js}"></script>
    <script th:src="@{/blog/js/fileinput_locale_zh.js}"></script>
    <style type="text/css">
        .pang1 {
            border: 1px solid #ccc;
        }

        .pang2 {
            border: 1px solid #ccc;
            height: 400px;
        }
    </style>

</head>

<body class="user-select single">
<header class="header">
    <nav class="navbar navbar-default" id="navbar">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar"
                    aria-expanded="false">
                <span class="sr-only"></span> <span class="icon-bar"></span>
                <span class="icon-bar"></span> <span class="icon-bar"></span>
            </button>
        </div>
        <div class="container">
            <div class="collapse navbar-collapse" id="header-navbar">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a th:href="@{/listBlog}">博客首页</a>
                    </li>
                    <li>
                        <a th:href="@{/createBlog}">我要写作</a>
                    </li>
                    <li>
                        <a th:href="@{/listBlog}">我的信息</a>
                    </li>
                    <li>
                        <a th:href="@{/listBlog}">返回导航页</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<section class="container">
    <div class="content-wrap">
        <div class="content" style="align-content: center">
            <header class="article-header">
                <h1 class="article-title"><a href="#" title="欢迎使用 wangEditor 富文本编辑器">欢迎使用 <b>wangEditor</b> 富文本编辑器</a>
                </h1>
            </header>
            <form id="comment-form" name="comment-form" th:action="@{/saveBlog}" method="post"
                  enctype="multipart/form-data">
                <input type="text" name="articletitle" class="form-control" placeholder="博客标题(不超过20个字)" maxlength="20"
                       autocomplete="off">
                <div style="padding: 5px 0; color: #ccc"></div>
                <input type="text" name="brief" class="form-control" placeholder="引导语(用50个字介绍下你的博客吧)" maxlength="20"
                       autocomplete="off">
                <div style="padding: 5px 0; color: #ccc"></div>
                <div class="container kv-main">
                    <br>
                    <div class="form-group">
                        <input id="title_photo" name="file" type="file" multiple class="file"
                               data-overwrite-initial="false" data-min-file-count="1">
                        <p class="help-block">上传博客封面,支持jpg、jpeg、png格式，大小不超过2.0M</p>
                    </div>
                </div>
                <div>
                    <div id="editor">
                        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
                    </div>
                    <input type="hidden" id="text1" name="articlecontent" value="articlecontent"/>
                </div>
                <div style="text-align:center;margin:20px;">
                    <button id="web_post_activity_form" style="width:250px;font-size:16px;" class="btn btn-primary"
                            onclick="getContent()" type="submit">发 布
                    </button>
                    <button style="width:250px;font-size:16px;" class="btn btn-primary" type="reset">重置</button>
                </div>
            </form>
        </div>
    </div>
    <aside class="sidebar">
        <div class="widget widget_hot">
            <h3>我的博客</h3>
            <ul th:each="myblog:${myBlog}">
                <li>
                    <a th:href="@{/showBlog(id=${myblog.id})}">
                        <span class="thumbnail">
                             <img class="thumb" th:src="@{'/images/'+${myblog.titlephoto}}"
                                  alt="用DTcms做一个独立博客网站（响应式模板）" style="display: block;">
                        </span>
                        <span class="text" th:text="${myblog.articletitle}">用DTcms做一个独立博客网站（响应式模板）</span>
                        <i class="glyphicon glyphicon-time"></i>
                        <span class="muted" th:text="${#dates.format(myblog.articletime,'yyyy-MM-dd')}">2016-11-01</span>
                        <i class="glyphicon glyphicon-heart-empty"></i>
                        <span class="muted" th:text="${myblog.likecount}">88</span>
                    </a>
                </li>
            </ul>
        </div>
    </aside>
</section>
<footer class="footer">
    <div id="gotop">
        <a class="gotop"></a>
    </div>
</footer>
<script th:src="@{/blog/js/bootstrap.min.js}"></script>
<script th:src="@{/blog/js/jquery.ias.js}"></script>
<script th:src="@{/blog/js/scripts.js}"></script>
<script type="text/javascript" th:src="@{/blog/js/wangEditor.min.js}"></script>
<!--富文本编辑器-->
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    editor.customConfig.uploadImgShowBase64 = true
    editor.create()

    function getContent() {
        var text = editor.txt.text();
        document.getElementById("text1").value = text;
    }
</script>
<!--图片上传-->
<script>
    $('#title_photo').fileinput({//初始化上传文件框
        showUpload: false,
        showRemove: true,
        uploadAsync: false,
        uploadLabel: "上传",//设置上传按钮的汉字
        uploadClass: "btn btn-primary",//设置上传按钮样式
        showCaption: true,//是否显示标题
        language: "zh",//配置语言
        uploadUrl: "file",
        maxFileSize: 20000,
        maxFileCount: 1, /*允许最大上传数，可以多个，当前设置单个*/
        enctype: 'multipart/form-data',
        allowedPreviewTypes: ['image'],
        allowedFileExtensions: ["jpg", "png", "gif"], /*上传文件格式*/
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        dropZoneTitle: "请通过拖拽图片文件放到这里",
        dropZoneClickTitle: "或者点击此区域添加图片",
        showBrowse: false,
        uploadAsync: false,
        browseOnZoneClick: true,
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
    $('.title_photo').on('fileerror', function (event, data, msg) {
        console.log("fileerror");
        console.log(data);
    });
    //同步上传错误处理
    $('.title_photo').on('filebatchuploaderror', function (event, data, msg) {
        console.log("filebatchuploaderror");
        console.log(data);
    });
    //同步上传返回结果处理
    $(".title_photo").on("filebatchuploadsuccess",
        function (event, data, previewId, index) {
            console.log("filebatchuploadsuccess");
            console.log(data);
        });
    //上传前
    $('.title_photo').on('filepreupload', function (event, data, previewId, index) {
        console.log("filepreupload");
    });
</script>
</body>

</html>